<!doctype html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>display-visibility-opacity-vertical-align-cursor </title>
   <style>
      /*设置元素的显示方式*/
      #a1 {
         width: 100px;
         height: 30px;
         background-color: #0AA1ED;
         /*把元素的表现形式,设为块级*/
         display: block;
         margin-top: 10px;
      }

      #d1 {
         display: inline;
         /*行内元素 设置宽高无效*/
         width: 100px;
         height: 100px;
         background-color: #00ffff;
      }

      #a_button {
         display: block;
         width: 110px;
         height: 30px;
         background-color: #0AA1ED;
         text-align: center;
         line-height: 30px;
         border-radius: 3px;
         text-decoration: none;
         color: white;
      }

      /*设置元素的显示效果*/
      #d2 {
         width: 100px;
         height: 100px;
         border: 2px solid red;
         visibility: visible;
         /*默认*/
         visibility: hidden;
      }

      /*透明度*/
      #d3 {
         width: 100px;
         height: 100px;
         background-color: black;
         background-color: rgba(0, 0, 0, 0.5);
         /*opacity:0.5;*/
      }

      #d3>div {
         width: 50px;
         height: 50px;
         background-color: red;
      }

      /*垂直对齐方式*/
      #img1 {
         vertical-align: middle;
      }

      /*光标*/
      #img_cursor {
         cursor: pointer;
      }
   </style>
</head>

<body>

   <p>1.设置元素的显示方式 display</p>
   <a id="a1" href="">块级</a>
   <span>kkdkdkkddkkd</span>
   <input type="text">
   <div id="d1">行内元素</div> <br>
   例2:把 a标签变成按钮<br>
   <a id="a_button" href="">提交</a>

   <p>2.设置元素的显示效果 visibility</p>
   <div id="d2"></div>

   <p>3.透明度 opacity</p>
   <div id="d3">
      <div></div>
   </div>

   <p>4.垂直对齐方式 vertical-align</p>
   <div>
      <span>ssssssssss</span>
      <img id="img1" src="img/14.png" alt="">
      <span>dddddddddd</span>
   </div>

   <p>5.光标的控制 cursor </p>
   <img id="img_cursor" src="img/14.png" alt="">

   <br><br><br><br><br><br><br>
</body>

</html>